<template>
    <div id="videos">
        <dz-header title="微视频"></dz-header>
        <h1>{{ msg }}</h1>
        <span class="iconfont">&#xe61b;</span>
        <van-button plain type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button plain type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
    
        <van-cell-group>
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
        </van-cell-group>
    
        <van-row>
            <van-col span="24">
                <van-button plain type="default" @click="getJson">GET请求JSON</van-button>
            </van-col>
        </van-row>
        <!-- 图像显示 -->
        <van-row>
            <van-col span="8">
                <van-image width="2rem" height="2rem" fit="scale-down" :src="dataTD[0]['thumbnail_pic_s']" />
            </van-col>
            <van-col span="8">
                <van-image width="2rem" height="2rem" fit="scale-down" :src="dataTD[0]['thumbnail_pic_s02']" />
            </van-col>
            <van-col span="8">
                <van-image width="2rem" height="2rem" fit="scale-down" :src="dataTD[0]['thumbnail_pic_s03']" />
            </van-col>
        </van-row>
        
        <van-row>
            <van-col span="24">
                <van-button type="primary" @click="getJsonGETParameters">GET请求带参</van-button>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="24">
                <van-button plain type="primary" @click="postRequest()">POST无参</van-button>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="24">
                <van-button type="info" @click="postRequestWithParameters()">POST有参</van-button>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="24">
                <van-button type="warning" @click="cookieSetRequest()">Cookie设置</van-button>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="24">
                <van-button type="danger" @click="callbackCookieValueRequest()">返回Cookie值</van-button>
            </van-col>
        </van-row>
        <van-divider>RESTful API /admin/users</van-divider>
        <van-row>
            <van-col span="6">
                <van-button plain type="primary" @click="restfulGET()">GET</van-button>
            </van-col>
            <van-col span="6">
                <van-button plain type="warning" @click="restfulPOST()">POST</van-button>
            </van-col>
            <van-col span="6">
                <van-button plain type="info" @click="restfulPUT()">PUT</van-button>
            </van-col>
            <van-col span="6">
                <van-button plain type="danger" @click="restfulDELETE()">DELETE</van-button>
            </van-col>
        </van-row>

        
    </div>
</template>

<script>
import dzHeader from '@/components/tabbar/Header'
export default {
    name: 'videos',
    data() {
        return {
            msg: 'Video.vue 首页',
            dataTD: [{}]
        }
    },
    components: {
        dzHeader,
    },
    methods: {
        getJson() {
            this.$axios
                .get("http://39.97.245.166/v1/toutiao/yule")
                .then(result => {
                    // console.log(result.data.result);
                    this.dataTD = result.data.result.data;
                    console.log(this.dataTD);
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getJsonGETParameters() {
            this.$axios
                .get("http://39.97.245.166/v1/toutiao/yule/parameters", {
                    params: {
                      name: "box",
                      age: 18
                    }
                }).then(result => {
                    console.log(result);
                }).catch(err => {
                    console.log(err);
                })
        },
        postRequest() {
            this.$axios
                .post("http://39.97.245.166/v1/toutiao/yule")
                .then(result => {
                    // console.log(result.data.result);
                    this.dataTD = result.data.result.data;
                    console.log(this.dataTD);
                })
                .catch(err => {
                    console.log(err);
                });
        },
        postRequestWithParameters() {
            this.$axios
                .post("http://39.97.245.166/v1/toutiao/yule/parameters", {
                    params: {
                      name: "box",
                      age: 18
                    }
                }).then(result => {
                    console.log(result);
                }).catch(err => {
                    console.log(err);
                })
        },
        cookieSetRequest() {
            this.$axios
                .get("http://39.97.245.166/v1/admin/index/login")
                .then(result => {
                    console.log(result.data);
                })
                .catch(err => {
                    console.log(err);
                });
        },
        callbackCookieValueRequest() {
            this.$axios
                .get("http://39.97.245.166/v1/admin/index/userinfo")
                .then(result => {
                    console.log(result.data);
                })
                .catch(err => {
                    console.log(err);
                });
        },
        restfulGET() {
            this.$axios
                .get("http://39.97.245.166/v1/admin/users")
                .then(result => {
                    console.log(result);
                }).catch(err => {
                    console.log(err);
                })
        },
        restfulPOST() {
            this.$axios
                .post("http://39.97.245.166/v1/admin/users")
                .then(result => {
                    console.log(result);
                }).catch(err => {
                    console.log(err);
                })
        },
        restfulPUT() {
            this.$axios
                .put("http://39.97.245.166/v1/admin/users")
                .then(result => {
                    console.log(result);
                }).catch(err => {
                    console.log(err);
                })
        },
        restfulDELETE() {
            this.$axios
                .delete("http://39.97.245.166/v1/admin/users")
                .then(result => {
                    console.log(result);
                }).catch(err => {
                    console.log(err);
                })
        }
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
h1 {
    margin-top: 46px;
    color: red;
    background-color: #666;
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}
#videos {
  margin-bottom: 52px;
}
</style>